<template>
  <view class="relative w-full bg-[#f6f6f6] pb-3">
    <nut-swiper
      class="w-full"
      :init-page="2"
      :auto-play="3000"
      pagination-visible
      pagination-color="#426543"
      pagination-unselected-color="#808080"
    >
      <nut-swiper-item
        v-for="(item, index) in banners"
        :key="index"
        style="height: 150px"
      >
        <image
          :src="item.image"
          mode="aspectFill"
          style="height: 100%; width: 100%"
          draggable="false"
        />
      </nut-swiper-item>
    </nut-swiper>
    <view class="relative w-full">
      <image class="w-full h-auto" :src="topBgUrl" mode="widthFix" />

      <!-- <view class="flex justify-around items-center pt-2 pb-2">
        <view v-for="(item, index) in topTags" :key="index" class="flex flex-col items-center">
          <image class="w-8 h-8" :src="item.icon" mode="widthFix" />
          <text class="text-xs text-gray-600 mt-1">{{ item.text }}</text>
        </view>
      </view> -->
    </view>

    <view
      class="flex items-center bg-white box-border py-1 px-2 border-b border-gray-200 w-[700rpx] bg-white mx-auto mb-3"
    >
      <IconFont
        font-class-name="iconfont"
        class-prefix="icon"
        color="#ff8800"
        name="lingdang"
        size="28"
      />
      <text class="text-[28rpx] text-[#333]">恭喜某某成为我们的合作伙伴</text>
    </view>

    <view
      class="flex justify-around items-center py-3 w-[700rpx] bg-white mx-auto mb-3"
    >
      <button
        v-for="(btn, idx) in functionBtns"
        :key="idx"
        class="flex flex-col items-center ccbtn"
        @tap="doFun(btn)"
        :open-type="btn.open"
      >

        <view
          class="w-12 h-12 flex items-center justify-center bg-[#ff9800] rounded-full liner-bg"
        >
          <IconFont
            font-class-name="iconfont"
            class-prefix="icon"
            color="#fff"
            :name="btn.icon"
            size="30"
          />
        </view>

        <text class="text-sm text-gray-700 mt-1">{{ btn.text }}</text>
      </button>
    </view>

    <view class="w-[700rpx] bg-white mx-auto mb-3">
      <view
        v-for="(biz, bIdx) in articleList"
        :key="bIdx"
        class="flex px-3 py-2 border-b border-gray-200 gap-2"
        @tap="goDetail(biz.id)"
      >
        <image
          class="w-[300rpx] h-[180rpx]"
          :src="biz.image"
          mode="aspectFill"
        />
        <text class="text-[32rpx] text-gray-800">{{ biz.title }}</text>
      </view>
    </view>

    <view class="box-border w-[700rpx] bg-white mx-auto">
      <view
        class="bg-[#ecab52] w-[120rpx] h-[54rpx] rounded-tl rounded-br flex justify-center items-center text-white text-xs mb-2"
      >
        施工案例
      </view>
      <!-- 图片列表区域 -->
      <view class="grid grid-cols-2 gap-2 p-2">
        <view v-for="(item, index) in scene" :key="index" class="relative">
          <image class="w-full h-24" :src="item.image" mode="aspectFill" />
          <!-- 右上角“施工案例”标签，若设计稿有此需求，可根据实际调整定位等样式 -->
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// import { Toast } from '@nutui/nutui-taro'
import Taro from "@tarojs/taro";

import { IconFont } from "@nutui/icons-vue-taro";
import topBgUrl from "@/assets/imgs/fun.png"; // 顶部背景图地址，替换实际链接
// import { Button, Cell, Address } from "@nutui/nutui-taro";

import { ref, reactive, onMounted } from "vue";
import http from "@/utils/http";
import { getFullPath } from "@/utils/config";
// import { Button } from "@nutui/nutui-taro";

// 模拟数据，实际可从接口获取或统一管理
// const topBgUrl = ref('http://www.dzgktf.com/templets/default/images/wtyt.jpg'); // 顶部背景图地址，替换实际链接
// const topTags = ref([
//   {
//     icon: "http://www.dzgktf.com/templets/default/images/wtyt.jpg",
//     text: "质量保证",
//   },
//   {
//     icon: "http://www.dzgktf.com/templets/default/images/wtyt.jpg",
//     text: "报价详细",
//   },
//   {
//     icon: "http://www.dzgktf.com/templets/default/images/wtyt.jpg",
//     text: "响应迅速",
//   },
//   {
//     icon: "http://www.dzgktf.com/templets/default/images/wtyt.jpg",
//     text: "售后保障",
//   },
// ]);
function doFun(item) {
  if (item.text == "关于我们") {
    Taro.switchTab({
      url: "/pages/about-us/index",
    });
  }
}
const functionBtns = ref([
  { icon: "hezuo", text: "关于我们", open: "" },
  { icon: "kefu", text: "联系客服", open: "contact" },
  { icon: "JC_0541", text: "一键分享", open: "share" },
]);
const businessList = ref([
  {
    image: "http://www.dzgktf.com/templets/default/images/wtyt.jpg",
    title: "防水维修",
  },
  {
    image: "http://www.dzgktf.com/templets/default/images/wtyt.jpg",
    title: "装修防水",
  },
]);

const goDetail = (id) => {
  Taro.navigateTo({
    // url: `/pages/index/article?id=${id}`,
    url: `/pages/order/evaluate?id=${id}`,
  });
};

const banners = ref([]);
const articleList = ref([]);

Taro.usePullDownRefresh(() => {
  getBanner();
  getArticleList();
  getImages();
  setTimeout(() => {
    Taro.stopPullDownRefresh();
  }, 1000);
});

onMounted(() => {
  getBanner();
  getArticleList();
  getImages();
});

const getBanner = () => {
  http
    .post("/index.php/index/api/index", {
      Func: "getBanner",
    })
    .then((res) => {
      console.log("res", res);
      if (res.error == 0) {
        banners.value = res.data;
        banners.value.forEach((i) => {
          i.image = getFullPath(i.image);
        });
      }
    });
};

const scene = ref([]);

const getImages = () => {
  http
    .post("/index.php/index/api/index", {
      Func: "getConstructionSite",
    })
    .then((res) => {
      if (res.error == 0) {
        scene.value = res.data;
        scene.value.forEach((i) => {
          i.image = getFullPath(i.image);
        });
      }
    });
};

const getArticleList = () => {
  http
    .post("/index.php/index/api/index", {
      Func: "getArticleList",
    })
    .then((res) => {
      console.log("res art", res);
      if (res.error == 0) {
        articleList.value = res.data;
        articleList.value.forEach((i) => {
          i.image = getFullPath(i.image);
        });
      }
    });
};
</script>

<style lang="scss">
.ccbtn {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
}

.ccbtn::after {
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  content: none !important;
  display: none !important;
}

.ccbtn::before {
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  content: none !important;
  display: none !important;
}
</style>
